博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
记一道控制并行数的前端面试题
阅读量:5874 次
发布时间:2019-06-19

本文共 2434 字,大约阅读时间需要 8 分钟。

题目:请实现如下函数,可以批量请求数据,所有的 url 地址在 urls 参数中,同时可以通过 max 参数控制请求的并行数,当所有请求结束之后,需要执行 callback 回调函数,发送请求的函数可以直接使用 fetch 即可

function sendRequest(urls: strind[], max: number, callback: () => void) {}复制代码

思路分析:

  1. 通过批量并且当所有请求结束后,在执行 callback 我们初步确定使用 Promise.all 可以实现此功能,
  2. 由于请求地址在 urls 数组中,因为是一个并行的问题,所以我们可以将请求地址进行按照 max 来进行分组,最后得到多少组就执行多少次请求

具体代码实现:

let bodyElement = document.body    let urls = [      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2580986389,1527418707&fm=27&gp=0.jpg',      'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1995874357,4132437942&fm=27&gp=0.jpg',      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640393967,721831803&fm=27&gp=0.jpg',      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1548525155,1032715394&fm=27&gp=0.jpg',      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2434600655,2612296260&fm=27&gp=0.jpg',      'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2160840192,133594931&fm=27&gp=0.jpg'    ]    let max = 4    let callback = () => {      console.log('所有请求完成了')    }    // 定义一个分组函数 已 max 为最大个数存储在一个对象中    let group = (urls, max) => {      let groupObj = {}            urls.forEach((item, index) => {        let group = parseInt(index / max)        if (groupObj[group]) {          return groupObj[group].push(item)        }        groupObj[group] = [item]      })            return groupObj    }        function sendRequest(urls, max, callback) {      let groupResult = group(urls, max)      let currentIndex = 0      // 使用 fetch 封装请求      let getFetch = source => {        return source.map(item => fetch(item).then(res => res.blob()))      }      let send = () => {        //  判断有没有当前组        groupResult[currentIndex] &&        Promise.all(getFetch(groupResult[currentIndex]))          .then((body) => {            callback()            currentIndex++            console.log(body, `第${currentIndex}次批量请求成功`)                        let html = ''                        body.forEach(item => {              html += ``            })            bodyElement.innerHTML += html                        // 用延时器是因为反应接口太快 以便于观察            setTimeout(() => {              send()            }, 1000)          })          .catch((err) => {            console.log('error')          })      }      send()    }        sendRequest(urls, max, callback)复制代码
功能已实现,大家有什么好的实现方法可以评论下,敬请指教。复制代码

转载于:https://juejin.im/post/5c889a2b5188257edb45e603

你可能感兴趣的文章
css变形 transform
查看>>
win7家庭版添加组策略编辑器
查看>>
lnmp环境搭建
查看>>
自定义session扫描器精确控制session销毁时间--学习笔记
查看>>
【转】EDK简单使用流程(3)
查看>>
Ubuntu中无法update的解决办法
查看>>
仿射变换
查看>>
decltype类型指示符
查看>>
虹软ArcFace人脸识别 与 Dlib 人脸识别对比
查看>>
laravel 验证码使用示例
查看>>
IE开发人员工具无法使用
查看>>
分页器(自定制)
查看>>
HDU1877 又一版 A+B
查看>>
往sde中导入要素类报错000732
查看>>
springboot之启动方式
查看>>
初次安装git配置用户名和邮箱及密钥
查看>>
6.1(续)索引、索引组织表--Oracle模式对象
查看>>
动画 球
查看>>
C++中的堆,栈,静态内存区,常量区
查看>>
动态SQL实现与注意事项(有返回值与无返回值动态SQL 实现)
查看>>